<template>
  <div class="Gauge2View3">
      <div class="more_btn" v-show="GaugeView2_list.length>0">
        <el-button
          type="primary"
          :loading-icon="Eleme"
          :loading="loading"
          @click="get_newdata"
        >获取新的值</el-button>
      </div>
    <template v-if="GaugeView2_list.length>0">
      <div class="Gauge2View2" v-loading="loading" >
        <div id="Gauge2"></div>
      </div>
    </template>
    <template v-if="GaugeView2_list.length==0" class="empty_box">
      <!-- <el-empty :description="empty_info" :image-size="100" /> -->
      <!-- <router-link to></router-link> -->
       <el-result icon="info" title="空">
        <template #sub-title>
          <p>当前景点无更多评价信息，请返回景点分析查看其他景点</p>
        </template>
        <template #extra>
      <router-link to="/SceneryPoint" style="text-decoration: none;">
        <el-button type="primary" class="user_back">点击返回景点分析界面</el-button>
      </router-link>
          <!-- <el-button type="primary">Back</el-button> -->
        </template>
      </el-result>
      <!-- <el-button type="primary">Primary</el-button> -->
    </template>
  </div>
</template>

<script setup lang="ts">
import { Eleme } from "@element-plus/icons-vue";

import { getAreaHot } from "@/request/comment";
const echart = inject("echart");
let myChart = null;
let page = ref(1);
const loading = ref(true);
let empty_info = ref("很抱歉");
let GaugeView2_list = ref([]);
const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  },
  city_list: {
    type: String,
    default: ""
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = async item => {
  // const result = {};
  await getAreaHot({
    page: page.value,
    list_id: 272
    // list_id: props.city_list
  }).then(res => {
    console.log("===========",res);
    
    let { data, status, message } = res;
    if (status != 201) {
      // data.forEach(item => {
        GaugeView2_list.value=data
      // });
      setTimeout(() => {
        initEcharts();
      }, 1000);
      setTimeout(() => {
        // initEcharts();
        renderEcharts(GaugeView2_list.value);
          loading.value = false;
        }, 1000);
      // setTimeout(() => {
      //   renderEcharts(GaugeView2_list.value);
      //   loading.value = false;
      // }, 2000);
    } else {
      ElMessage({
        message: message,
        type: "warning"
      });
      loading.value = false;
    }
  });
};
const get_newdata = async () => {
  page.value += 1;
  // const result = {};
  loading.value = true;
  await getAreaHot({
    page: page.value,
    // list_id: 272
    list_id: props.city_list
  }).then(res => {
    let { data, status, message } = res;
    if (status != 201) {
      data.forEach(item => {
        GaugeView2_list.value.push(item);
      });
      setTimeout(() => {
        initEcharts();
      }, 1000);
      setTimeout(() => {
        // initEcharts();
        renderEcharts(GaugeView2_list.value);
          loading.value = false;
        }, 1000);
        // setTimeout(() => {
        // loading.value = false;
      //   renderEcharts(GaugeView2_list.value);
      // }, 2000);
    } else {
      ElMessage({
        message: '已经到底了',
        type: "warning"
      });
      loading.value = false;
    }

    // loading.value = true
  });
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("Gauge2"));
};
const renderEcharts = (result: any) => {
  var colorList = [
    [
      "#ff7f50",
      "#87cefa",
      "#da70d6",
      "#32cd32",
      "#6495ed",
      "#ff69b4",
      "#ba55d3",
      "#cd5c5c",
      "#ffa500",
      "#40e0d0",
      "#1e90ff",
      "#ff6347",
      "#7b68ee",
      "#d0648a",
      "#ffd700",
      "#6b8e23",
      "#4ea397",
      "#3cb371",
      "#b8860b",
      "#7bd9a5"
    ],
    [
      "#ff7f50",
      "#87cefa",
      "#da70d6",
      "#32cd32",
      "#6495ed",
      "#ff69b4",
      "#ba55d3",
      "#cd5c5c",
      "#ffa500",
      "#40e0d0",
      "#1e90ff",
      "#ff6347",
      "#7b68ee",
      "#00fa9a",
      "#ffd700",
      "#6b8e23",
      "#ff00ff",
      "#3cb371",
      "#b8860b",
      "#30e0e0"
    ],
    [
      "#929fff",
      "#9de0ff",
      "#ffa897",
      "#af87fe",
      "#7dc3fe",
      "#bb60b2",
      "#433e7c",
      "#f47a75",
      "#009db2",
      "#024b51",
      "#0780cf",
      "#765005",
      "#e75840",
      "#26ccd8",
      "#3685fe",
      "#9977ef",
      "#f5616f",
      "#f7b13f",
      "#f9e264",
      "#50c48f"
    ]
  ][2];
  // console.log("new", result);
  let new_result = [];
  result.forEach((item, index) => {
    // console.log(index);

    let data = {};
    data.name = item.AREA + index;
    data.value = item.COMMENT_COUNT + Math.floor(Math.random() * 128) + 10;
    (data.symbolSize = Math.floor(Math.random() * 48) + 1),
      (data.draggable = true);
    data.itemStyle = {};
    data.itemStyle.normal = {};
    data.itemStyle.normal.shadowBlur = 10;
    data.itemStyle.normal.shadowColor =
      colorList[Math.floor(Math.random() * 18) + 1];
    data.itemStyle.normal.color = colorList[Math.floor(Math.random() * 18) + 1];
    // console.log(data);
    new_result.push(data);
  });
  // console.log("new_result", new_result);

  myChart.setOption({
    // 图表标题
    title: {
      show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
      text: "各个城市评论的人数", //主标题文本，'\n'指定换行
      x: "center", // 水平安放位置，默认为左对齐，可选为：
      // 'center' ¦ 'left' ¦ 'right'
      // ¦ {number}（x坐标，单位px）
      y: "bottom", // 垂直安放位置，默认为全图顶端，可选为：
      // 'top' ¦ 'bottom' ¦ 'center'
      // ¦ {number}（y坐标，单位px）
      //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "#ccc", // 标题边框颜色
      borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
      padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
      // 接受数组分别设定上右下左边距，同css
      itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
      textStyle: {
        align: "center",
        color: "#FA0326",
        fontSize: 20
      },
      subtextStyle: {
        color: "#aaa" // 副标题文字颜色
      }
    },
    backgroundColor: "#040042",
    tooltip: {},
    animationDurationUpdate: function(idx) {
      console.log("idx", idx);

      // 越往后的数据延迟越大
      return idx * 100;
    },
    animationEasingUpdate: "bounceIn",
    color: ["#fff", "#fff", "#fff"],
    series: [
      {
        type: "graph",
        layout: "force",
        force: {
          repulsion: 250,
          edgeLength: 10
        },
        roam: true,
        label: {
          normal: {
            show: true
          }
        },
        data: new_result
      }
    ]
    // backgroundColor: "#000737",
  });
};

watch(
  () => props.city_list,
  (newValue, oldValue) => {
    if (newValue) {
      console.log(newValue);

      // initEcharts();
      getData(newValue);
    }
  }
);
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style lang="scss" scoped>
.Gauge2View3 {
  height: 100%;
  width: 100%;
  // background-color: rgb(255, 255, 255);
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
}
.more_btn {
  height: 10%;
  width: 100%;
  .el-button {
    width: 100%;
    height: 100%;
  }
}
.Gauge2View2 {
  height: 90%;
  width: 100%;
  /* height: 100%; */
  /* background-color: aliceblue; */
}

#Gauge2 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
.empty_box {
  // background-color: aqua;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.el-button {
  margin: 0 auto;
}
.user_back {
  // background-color: aquamarine;
  margin: 0 auto;
  justify-content: center;
}
</style>